<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">仓库列表</p>
        </div>
        <div class="view-container">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button
                        type="info"
                        icon="el-icon-sort"
                        size="mini"
                        @click="toggleExpandAll"
                    >展开/折叠</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="isWidth ? 6 : 24">
                    <el-table v-if="refreshTable" v-loading="loading" :data="warehouseList" row-key="warehouseId"
                        :default-expand-all="isExpandAll"
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                    >
                        <el-table-column prop="name" label="仓库名称">
                            <template slot-scope="scope">
                                <span :class="{active: scope.row.warehouseId == id }" @click="onClickWarehouse(scope.row)">{{ scope.row.name }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <template v-if="isWidth">
                    <el-col :span="1">
                        <div class="line"></div>
                    </el-col>
                    <el-col :span="17">
                        <template v-if="rightWarehouse">
                            <template v-if="isShowWarehouse">
                                <el-col :span="8" v-for="(item, index) in rightWarehouse" :key="index" class="warehouse">
                                    <div @click="onRightWarehouse(item.warehouseId, 'warehouse')">
                                        <span>{{ item.name }}</span>
                                        <img src="@/assets/img/warehouse/1.png" alt="" width="100%">
                                    </div>
                                </el-col>
                            </template>
                            <template v-if="isShowArea">
                                <template v-if="JSON.stringify(areaList) !== '[]'">
                                    <el-col :span="8" v-for="(item, index) in areaList" :key="index" class="warehouse">
                                        <div @click="onRightWarehouse(item.warehouseId, 'area')">
                                            <span>{{ item.name }}</span>
                                            <div class="area">
                                                <template v-if="item.children">
                                                    <div class="shelves">
                                                        <img src="@/assets/img/warehouse/3.png" alt="" width="30%" v-for="(a, i) in item.children" :key="i">
                                                    </div>
                                                </template>
                                                <template v-else>
                                                    <div class="empty">暂无数据！</div>
                                                </template>
                                            </div>
                                        </div>
                                    </el-col>
                                </template>
                                <template v-else>
                                    暂无数据！
                                </template>
                            </template>
                            <template v-if="isShowShelves">
                                <template v-if="JSON.stringify(areaList) !== '[]'">
                                    <el-col :span="8" v-for="(item, index) in areaList" :key="index" class="warehouse">
                                        <div @click="onClickPositions(item.warehouseId)">
                                            <span>{{ item.name }}</span>
                                            <div class="area">
                                                <template v-if="item.children">
                                                    <div class="layer-box">
                                                        <div class="layer">
                                                            <div class="layer-item" v-for="(a, i) in item.children" :key="i">
                                                                <div v-for="(b, y) in a.children" :key="y" class="layer-item-cont"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </template>
                                                <template v-else>
                                                    <div class="empty">暂无数据！</div>
                                                </template>
                                            </div>
                                        </div>
                                    </el-col>
                                </template>
                                <template v-else>
                                    暂无数据！
                                </template>
                            </template>
                            <template v-if="isShowPositions">
                                <template v-if="JSON.stringify(areaList) !== '[]'">
                                    <el-col :span="8" v-for="(item, index) in productData" :key="index" class="warehouse">
                                        <div>
                                            <span>{{ item.productStorageList[0].positionName }}</span>
                                            <div class="area">
                                                <div class="product">
                                                    <div v-for="(y, index) in item.productStorageList" :key="index">
                                                        {{ y.specificationName + '-' + y.store }}{{ y.productUnit == null ? '' :  '-' + y.productUnit }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-col>
                                </template>
                                <template v-else>
                                    暂无数据！
                                </template>
                            </template>
                        </template>
                        <template v-else>
                            暂无数据！
                        </template>
                    </el-col>
                </template>
            </el-row>
        </div>
    </div>
</template>

<script>
import { warehouseList, searchWarehouseList, searchWarehouseName, searchWarehouseId } from "@/api/system/warehouse/warehouse"
export default {
    name: "warehouseSettingList",
    data() {
        return {
            // 遮罩层
            loading: false,
            // 是否展开，默认全部展开
            isExpandAll: true,
            // 重新渲染表格状态
            refreshTable: true,
            // 销售出库数据
            warehouseList: [],
            id: 1,
            detailData: '',
            type: '',
            index: '',
            warehouseName: [],
            isWidth: true,
            rightWarehouse: [],
            areaList: [],
            isShowWarehouse: true,
            isShowArea: false,
            isShowShelves: false,
            isShowPositions: false,
            list: '',
            listId: '',
            planNum: '',
            pendingStorage: '',
            form: '',
            productData: []
        }
    },
    created() {
        if(this.$route.query.type){
            this.type = this.$route.query.type
            this.isWidth = false
        }
        if(this.$route.query.index){
            this.index = this.$route.query.index
        }
        if(this.$route.query.planNum){
            this.planNum = this.$route.query.planNum
        }
        if(this.$route.query.data){
            this.detailData = this.$route.query.data
            console.log(this.detailData)
            if(this.$route.query.type == 'outSale'){
                this.getSearchWarehouseList(this.detailData.orderDetails[this.index].warehouse)
            }else if(this.$route.query.type == 'otherStorage'){
                this.getSearchWarehouseList(this.detailData.detailList[this.index].warehouse)
            }else if(this.$route.query.type == 'otherOutbound'){
                this.getSearchWarehouseList(this.detailData.detailList[this.index].warehouse)
            }else if(this.$route.query.type == 'materialRequisition' || this.$route.query.type == 'materialRequisitionDetail'){
                this.getSearchWarehouseList(this.detailData.details[this.index].warehouse)
            }else if(this.$route.query.type == 'materialReturn'){
                this.getSearchWarehouseList(this.detailData.detailList[this.index].warehouse)
            }else if(this.$route.query.type == 'purchaseReturnOut'){
                this.getSearchWarehouseList(this.detailData.detailList[this.index].warehouseId)
            }else if(this.$route.query.type == 'salesReturnOut'){
                this.getSearchWarehouseList(this.detailData.salesReturnInboundDetailList[this.index].warehouseId)
            }else{
                this.getSearchWarehouseList(this.detailData.detailList[this.index].warehouse)
            }
        }else if(this.$route.query.list){
            this.form = this.$route.query.form
            this.list = this.$route.query.list
            this.total = this.$route.query.total
            this.pendingStorage = this.$route.query.pendingStorage
            this.listId = this.$route.query.id
            this.getSearchWarehouseList(this.list.warehouse)
        }else{
            this.getList()
        }
    },
    methods: {
        // 根据仓库id查询
        getSearchWarehouseList(e){
            searchWarehouseList(e).then(res => {
                if(res.code == 200){
                    this.loading = false
                    this.warehouseList = res.data.data
                }
            })
        },
        // 获取列表
        getList() {
            warehouseList().then(res => {
                // console.log(res.data)
                this.warehouseList = res.data
                if(JSON.stringify(res.data) !== '[]'){
                    this.rightWarehouse = res.data[0].children
                }else{
                    this.rightWarehouse = ''
                }
                this.loading = false
            })
        },
        // 展开/折叠
        toggleExpandAll() {
            this.refreshTable = false
            this.isExpandAll = !this.isExpandAll
            this.$nextTick(() => {
                this.refreshTable = true
            })
        },
        // 点击仓库分类列表
        onClickWarehouse(row){
            // 采购入库查询仓库名称
            if(this.type == 'purchaseStorage'){
                if(row.level == 5){
                    searchWarehouseName(row.warehouseId).then(res => {
                        if(res.code == 200){
                            this.warehouseName = res.data
                            let arr = this.warehouseName.find(item => {
                                return item.level == 2
                            })
                            this.detailData.detailList[this.index].areaName = arr.name // 区域名称
                            this.detailData.detailList[this.index].areaId = arr.warehouseId // 区域id
                            this.detailData.detailList[this.index].positionName = row.name // 仓位名称
                            this.detailData.detailList[this.index].positionId = row.warehouseId // 仓位id
                            // console.log(this.detailData)
                            this.$tab.closeOpenPage({ path: "/purchase/purchaseStorage/detail", query:{ id: this.detailData.id, data: this.detailData, index: this.index } })
                        }
                    })
                }else{
                    this.$modal.msgError('请选择仓位！')
                }
            }else if(this.type == 'purchaseStorageMorePosition'){
                if(row.level == 5){
                    searchWarehouseName(row.warehouseId).then(res => {
                        if(res.code == 200){
                            this.warehouseName = res.data
                            let arr = this.warehouseName.find(item => {
                                return item.level == 2
                            })
                            this.list.areaName = arr.name
                            this.list.areaId = arr.warehouseId
                            this.list.positionName = row.name
                            this.list.positionId = row.warehouseId
                            this.$tab.closeOpenPage({ path: "/purchase/purchaseStorage/detail", query:{ id: this.listId, list: this.list, index: this.index, planNum: this.planNum, pendingStorage: this.pendingStorage } })
                        }
                    })
                }else{
                    this.$modal.msgError('请选择仓位！')
                }
            }else if(this.type == 'purchaseReturnOut'){
                if(row.level == 5){
                    searchWarehouseName(row.warehouseId).then(res => {
                        if(res.code == 200){
                            this.warehouseName = res.data
                            let arr = this.warehouseName.find(item => {
                                return item.level == 2
                            })
                            this.detailData.detailList[this.index].areaName = arr.name // 区域名称
                            this.detailData.detailList[this.index].areaId = arr.warehouseId // 区域id
                            this.detailData.detailList[this.index].positionName = row.name // 仓位名称
                            this.detailData.detailList[this.index].positionId = row.warehouseId // 仓位id
                            // console.log(this.detailData)
                            this.$tab.closeOpenPage({ path: "/purchase/purchaseReturnOut/detail", query:{ id: this.detailData.id, data: this.detailData, index: this.index } })
                        }
                    })
                }else{
                    this.$modal.msgError('请选择仓位！')
                }
            }else if(this.type == 'purchaseReturnOutMorePosition'){
                if(row.level == 5){
                    searchWarehouseName(row.warehouseId).then(res => {
                        if(res.code == 200){
                            this.warehouseName = res.data
                            let arr = this.warehouseName.find(item => {
                                return item.level == 2
                            })
                            this.list.areaName = arr.name
                            this.list.areaId = arr.warehouseId
                            this.list.positionName = row.name
                            this.list.positionId = row.warehouseId
                            this.$tab.closeOpenPage({ path: "/purchase/purchaseReturnOut/detail", query:{ id: this.listId, list: this.list, index: this.index } })
                        }
                    })
                }else{
                    this.$modal.msgError('请选择仓位！')
                }
            }else if(this.type == 'salesReturnOut'){
                if(row.level == 5){
                    searchWarehouseName(row.warehouseId).then(res => {
                        if(res.code == 200){
                            this.warehouseName = res.data
                            let arr = this.warehouseName.find(item => {
                                return item.level == 2
                            })
                            this.detailData.salesReturnInboundDetailList[this.index].areaName = arr.name // 区域名称
                            this.detailData.salesReturnInboundDetailList[this.index].areaId = arr.warehouseId // 区域id
                            this.detailData.salesReturnInboundDetailList[this.index].positionName = row.name // 仓位名称
                            this.detailData.salesReturnInboundDetailList[this.index].positionId = row.warehouseId // 仓位id
                            // console.log(this.detailData)
                            this.$tab.closeOpenPage({ path: "/sales/salesReturnOut/detail", query:{ id: this.detailData.id, data: this.detailData, index: this.index } })
                        }
                    })
                }else{
                    this.$modal.msgError('请选择仓位！')
                }
            }else if(this.type == 'salesReturnOutMorePosition'){
                if(row.level == 5){
                    searchWarehouseName(row.warehouseId).then(res => {
                        if(res.code == 200){
                            this.warehouseName = res.data
                            let arr = this.warehouseName.find(item => {
                                return item.level == 2
                            })
                            this.list.areaName = arr.name
                            this.list.areaId = arr.warehouseId
                            this.list.positionName = row.name
                            this.list.positionId = row.warehouseId
                            this.$tab.closeOpenPage({ path: "/sales/salesReturnOut/detail", query:{ id: this.listId, list: this.list, index: this.index } })
                        }
                    })
                }else{
                    this.$modal.msgError('请选择仓位！')
                }
            }else if(this.type == 'outSale'){
                if(row.level == 5){
                    searchWarehouseName(row.warehouseId).then(res => {
                        if(res.code == 200){
                            this.warehouseName = res.data
                            let arr = this.warehouseName.find(item => {
                                return item.level == 2
                            })
                            this.detailData.orderDetails[this.index].areaName = arr.name // 区域名称
                            this.detailData.orderDetails[this.index].areaId = arr.warehouseId // 区域id
                            this.detailData.orderDetails[this.index].positionName = row.name // 仓位名称
                            this.detailData.orderDetails[this.index].positionId = row.warehouseId // 仓位id
                            // console.log(this.detailData)
                            this.$tab.closeOpenPage({ path: "/sales/outSale/detail", query:{ id: this.detailData.id, data: this.detailData, index: this.index } })
                        }
                    })
                }else{
                    this.$modal.msgError('请选择仓位！')
                }
            }else if(this.type == 'otherStorage'){
                if(row.level == 5){
                    searchWarehouseName(row.warehouseId).then(res => {
                        if(res.code == 200){
                            this.warehouseName = res.data
                            let arr = this.warehouseName.find(item => {
                                return item.level == 2
                            })
                            this.detailData.detailList[this.index].areaName = arr.name // 区域名称
                            this.detailData.detailList[this.index].areaId = arr.warehouseId // 区域id
                            this.detailData.detailList[this.index].positionName = row.name // 仓位名称
                            this.detailData.detailList[this.index].positionId = row.warehouseId // 仓位id
                            if(this.$route.query.id){
                                this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/otherStorage/add", query:{ id: this.$route.query.id, data: this.detailData, index: this.index } })
                            }else{
                                this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/otherStorage/add", query:{ data: this.detailData, index: this.index } })
                            }
                        }
                    })
                }else{
                    this.$modal.msgError('请选择仓位！')
                }
            }else if(this.type == 'otherStorageMorePosition'){
                if(row.level == 5){
                    searchWarehouseName(row.warehouseId).then(res => {
                        if(res.code == 200){
                            this.warehouseName = res.data
                            let arr = this.warehouseName.find(item => {
                                return item.level == 2
                            })
                            this.list.areaName = arr.name
                            this.list.areaId = arr.warehouseId
                            this.list.positionName = row.name
                            this.list.positionId = row.warehouseId
                            if(this.$route.query.id){
                                this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/otherStorage/add", query:{ id: this.$route.query.id, morePosition: this.list, index: this.index, form: this.form } })
                            }else{
                                this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/otherStorage/add", query:{ morePosition: this.list, index: this.index, form: this.form } })
                            }
                        }
                    })
                }else{
                    this.$modal.msgError('请选择仓位！')
                }
            }else if(this.type == 'outSaleMorePosition'){
                if(row.level == 5){
                    searchWarehouseName(row.warehouseId).then(res => {
                        if(res.code == 200){
                            this.warehouseName = res.data
                            let arr = this.warehouseName.find(item => {
                                return item.level == 2
                            })
                            this.list.areaName = arr.name
                            this.list.areaId = arr.warehouseId
                            this.list.positionName = row.name
                            this.list.positionId = row.warehouseId
                            this.$tab.closeOpenPage({ path: "/sales/outSale/detail", query:{ id: this.listId, list: this.list, index: this.index, total: this.total, pendingStorage: this.pendingStorage } })
                        }
                    })
                }else{
                    this.$modal.msgError('请选择仓位！')
                }
            }else if(this.type == 'otherOutbound'){
                if(row.level == 5){
                    searchWarehouseName(row.warehouseId).then(res => {
                        this.warehouseName = res.data
                        let arr = this.warehouseName.find(item => {
                            return item.level == 2
                        })
                        this.detailData.detailList[this.index].areaName = arr.name // 区域名称
                        this.detailData.detailList[this.index].areaId = arr.warehouseId // 区域id
                        this.detailData.detailList[this.index].positionName = row.name // 仓位名称
                        this.detailData.detailList[this.index].positionId = row.warehouseId // 仓位id
                        if(this.$route.query.id){
                            this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/otherOutbound/add", query:{ id: this.$route.query.id, data: this.detailData, index: this.index } })
                        }else{
                            this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/otherOutbound/add", query:{ data: this.detailData, index: this.index } })
                        }
                    })
                }
            }else if(this.type == 'otherOutboundMorePosition'){
                if(row.level == 5){
                    searchWarehouseName(row.warehouseId).then(res => {
                        if(res.code == 200){
                            this.warehouseName = res.data
                            let arr = this.warehouseName.find(item => {
                                return item.level == 2
                            })
                            this.list.areaName = arr.name
                            this.list.areaId = arr.warehouseId
                            this.list.positionName = row.name
                            this.list.positionId = row.warehouseId
                            if(this.$route.query.id){
                                this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/otherOutbound/add", query:{ id: this.$route.query.id, morePosition: this.list, index: this.index, form: this.form } })
                            }else{
                                this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/otherOutbound/add", query:{ morePosition: this.list, index: this.index, form: this.form } })
                            }
                        }
                    })
                }else{
                    this.$modal.msgError('请选择仓位！')
                }
            }else if(this.type == 'materialRequisition' || this.type == 'materialRequisitionDetail'){
                if(row.level == 5){
                    searchWarehouseName(row.warehouseId).then(res => {
                        if(res.code == 200){
                            this.warehouseName = res.data
                            let arr = this.warehouseName.find(item => {
                                return item.level == 2
                            })
                            this.detailData.details[this.index].areaName = arr.name // 区域名称
                            this.detailData.details[this.index].areaId = arr.warehouseId // 区域id
                            this.detailData.details[this.index].positionName = row.name // 仓位名称
                            this.detailData.details[this.index].positionId = row.warehouseId // 仓位id
                            if(this.$route.query.id){
                                if(this.type == 'materialRequisitionDetail'){
                                    this.$tab.closeOpenPage({ path: "/material/materialRequisition/detail", query:{id:this.$route.query.id,  data: this.detailData, index: this.index } })
                                }else{
                                    this.$tab.closeOpenPage({ path: "/material/materialRequisition/edit", query:{id:this.$route.query.id,  data: this.detailData, index: this.index } })
                                }
                            }else{
                                this.$tab.closeOpenPage({ path: "/material/materialRequisition/add", query:{ data: this.detailData, index: this.index } })
                            }
                        }
                    })
                }else{
                    this.$modal.msgError('请选择仓位！')
                }
            }else if(this.type == 'materialRequisitionMorePosition'){
                if(row.level == 5){
                    searchWarehouseName(row.warehouseId).then(res => {
                        if(res.code == 200){
                            this.warehouseName = res.data
                            let arr = this.warehouseName.find(item => {
                                return item.level == 2
                            })
                            this.list.areaName = arr.name
                            this.list.areaId = arr.warehouseId
                            this.list.positionName = row.name
                            this.list.positionId = row.warehouseId
                            this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/materialRequisition/detail", query:{ id: this.listId, list: this.list, index: this.index } })
                        }
                    })
                }else{
                    this.$modal.msgError('请选择仓位！')
                }
            }else if(this.type == "materialReturn"){
                if(row.level == 5){
                    searchWarehouseName(row.warehouseId).then(res => {
                        if(res.code == 200){
                            this.warehouseName = res.data
                            let arr = this.warehouseName.find(item => {
                                return item.level == 2
                            })
                            this.detailData.detailList[this.index].areaName = arr.name // 区域名称
                            this.detailData.detailList[this.index].areaId = arr.warehouseId // 区域id
                            this.detailData.detailList[this.index].positionName = row.name // 仓位名称
                            this.detailData.detailList[this.index].positionId = row.warehouseId // 仓位id
                            if(this.$route.query.id){
                                this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/materialReturn/edit", query:{ id: this.$route.query.id, data: this.detailData, index: this.index } })
                            }else{
                                this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/materialReturn/add", query:{ data: this.detailData, index: this.index } })
                            }
                        }
                    })
                }else{
                    this.$modal.msgError('请选择仓位！')
                }
            }else if(this.type == "materialReturnMorePosition"){
                if(row.level == 5){
                    searchWarehouseName(row.warehouseId).then(res => {
                        if(res.code == 200){
                            this.warehouseName = res.data
                            let arr = this.warehouseName.find(item => {
                                return item.level == 2
                            })
                            this.list.areaName = arr.name
                            this.list.areaId = arr.warehouseId
                            this.list.positionName = row.name
                            this.list.positionId = row.warehouseId
                            if(this.$route.query.id){
                                this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/materialReturn/edit", query:{id: this.$route.query.id, morePosition: this.list, index: this.index, form: this.form  } })
                            }else{
                                this.$tab.closeOpenPage({ path: "/warehouseManagement/warehouse/materialReturn/add", query:{ morePosition: this.list, index: this.index, form: this.form  } })
                            }
                        }
                    })
                }else{
                    this.$modal.msgError('请选择仓位！')
                }
            }else{
                // console.log(row)
                this.id = row.warehouseId
                searchWarehouseList(this.id).then(res => {
                    if(res.code == 200){
                        if(row.level == 0){
                            this.isShowWarehouse = true
                            this.isShowArea = false
                            this.isShowShelves = false
                            this.isShowPositions = false
                            this.rightWarehouse = res.data.data
                        }else if(row.level == 1){
                            this.isShowWarehouse = false
                            this.isShowArea = true
                            this.isShowShelves = false
                            this.isShowPositions = false
                            this.areaList = res.data.data
                        }else if(row.level == 2){
                            this.isShowWarehouse = false
                            this.isShowArea = false
                            this.isShowShelves = true
                            this.isShowPositions = false
                            this.areaList = res.data.data
                        }else{
                            this.isShowWarehouse = false
                            this.isShowArea = false
                            this.isShowShelves = false
                            this.isShowPositions = true
                            if(row.level == 3){
                                let arr = []
                                res.data.data.forEach(a => {
                                    if(a.children !== null){
                                        a.children.forEach(b => {
                                            arr.push(b)
                                        })
                                    }
                                })
                                this.areaList = arr
                                this.onClickWarehouseId(row.warehouseId)
                            }else if(row.level == 4){
                                this.areaList = res.data.data
                                this.onClickWarehouseId(row.warehouseId)
                            }
                        }
                    }
                })
            }
        },
        // 点击仓库显示区域
        onRightWarehouse(e, item){
            this.id = e
            searchWarehouseList(e).then(res => {
                if(res.code == 200){
                    this.areaList = res.data.data
                    if(this.areaList.length > 0){
                        if(item == 'warehouse'){
                            this.isShowWarehouse = false
                            this.isShowArea = true
                        }else if(item == 'area'){
                            this.isShowArea = false
                            this.isShowShelves = true
                        }
                    }else{
                        this.$modal.msgError('暂无数据！')
                    }
                }
            })
        },
        onClickPositions(e){
            this.id = e
            searchWarehouseList(e).then(res => {
                if(res.code == 200){
                    let arr = []
                    res.data.data.forEach(a => {
                        if(a.children !== null){
                            a.children.forEach(b => {
                                // console.log(b)
                                arr.push(b)
                            })
                        }
                    })
                    this.areaList = arr
                    this.isShowShelves = false
                    this.isShowPositions = true
                    this.onClickWarehouseId(e)
                }
            })
        },
        onClickWarehouseId(e){
            // console.log(e)
            searchWarehouseId(e).then(res => {
                if(res.code == 200){
                    let obj = res.data.filter(i => this.areaList.some(y => y.warehouseId === i.warehouseId))
                    this.productData = obj
                }
            })
        }
    }
}
</script>

<style scoped>
::v-deep .el-table .cell span{
    cursor: pointer;
}
.active{
    color: #28C6C6;
}
.warehouse{
    text-align: center;
    padding: 0 10px;
    margin-bottom: 10px;
    cursor: pointer;
}
.warehouse span{
    display: block;
    padding-bottom:10px;
    line-height: 20px;
}
.area{
    width: 100%;
    background: #5d7076;
    border: 5px solid #e8b971;
    padding: 20px;
    overflow: hidden;
    text-align: left;
    min-height: 200px;
}
.area-item{
    display: inline-block;
    width: 30%;
    background: #d3dddf;
    border: 2px solid #e8b971;
    margin: 0 5% 5% 0;
    padding: 10px 0 0 0;
    text-align: right;
}
.area-item:nth-child(3n){
    margin: 0 0 5%;
}
.area-item img{
    width: 60%;
}
.shelves{
    position: relative;
    padding: 10px 10px 0;
    min-height: 150px;
    height: 150px;
    overflow-y: scroll;
    background: #d3dddf;
    border: 2px solid #e8b971;
}
.shelves img{
    margin: 0 5% 5% 0;
}
.shelves img:nth-child(3n){
    margin: 0 0 5%;
}
.layer-box{
    display: flex;
    align-items: center;
    height: 150px;
    padding: 0 10px;
    background: #d3dddf;
    border: 2px solid #e8b971;
}
.layer{
    width: 100%;
    padding: 0 10px;
    border-bottom: 2px solid #000;
}
.layer-item{
    display: flex;
    height: 15px;
    background: #c1904d;
    border-bottom: 1px solid #fff;
}
.layer-item:last-child, .layer-item-cont:last-child{
    border: none;
}
.layer-item-cont{
    flex: 1;
    border-right: 1px solid #fff;
}
.product{
    min-height: 150px;
    overflow: hidden;
    padding: 10px;
    background: #d3dddf;
    border: 2px solid #e8b971;
}
.product-item{
    width: 100%;
    height: 150px;
    line-height: 25px;
    overflow-y: scroll;
}
.empty{
    text-align: center;
    color: #fff;
}
.empty-pro{
    text-align: center;
    color: #333;
}
</style>